<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!--mobile apps-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--mobile apps-->
<!--Custom Theme files-->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/swipebox.css">
<!--//Custom Theme files-->
<!--js-->
<script src="js/jquery-1.11.1.min.js"></script> 
<!-- //js -->
<!--web-fonts-->
<link href='https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!--start-smooth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>
<!--//end-smooth-scrolling-->
</head>
<body>
	<!--banner-->
	<div id="home" class="banner">
		<div class="banner-info">
			<div class="container">
				<div class="col-md-4 header-left">
					<img src="images/img1.png" alt=""/>
				</div>
				<div class="col-md-8 header-right">
					<h2>你好</h2>
					<h1>我是吴晶晶</h1>
					<h6>Web前端开发</h6>
					<ul class="address">
						<li>
							<ul class="address-text">
								<li><b>电话 </b></li>
								<li>+00 111 222 3333</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>工作地</b></li>
								<li>广东省深圳市罗湖区</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="#"> 1689611800@qq.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>个人主页</b></li>
								<li><a href="https://wujingj.gitee.io">https://wujingj.gitee.io</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--top-nav-->
	<div class="top-nav wow">
		<div class="container">
			<div class="navbar-header logo">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					Menu
				</button>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="menu">
					<ul class="nav navbar">
						<!--<li><a href="#about" class="scroll">About</a></li>-->
						<li><a href="#work" class="scroll">工作经历</a></li>
						<li><a href="#education" class="scroll">教育经历</a></li>
						<li><a href="#skills" class="scroll">技能</a></li>
						<li><a href="#projects" class="scroll">我的项目</a></li>
						<li><a href="#contact" class="scroll">联系我</a></li>
					</ul>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>	
	<!--//top-nav-->
	<!--about-->
	<!--<div id="about" class="about">
		<div class="container">
			<h3 class="title"> About Me</h3>
			<div class="col-md-8 about-left">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet sem sit amet dolor luctus pellentesque. Pellentesque eleifend tellus at interdum elementum. Nam egestas molestie elit. Vivamus sed accumsan quam, a mollis magna. Nam aliquet eros eget sapien consequat tincidunt at vel nibh. Duis ut turpis mi. Duis nec scelerisque urna, sit amet varius arcu. Aliquam aliquet sapien quis mauris semper suscipit. Maecenas pharetra dapibus posuere. Praesent odio sem, varius quis dolor vel, maximus dapibus mi. Pellentesque mattis mauris neque. Nam aliquam turpis ante, at cursus massa ullamcorper ut. Proin id diam id nisi sagittis pellentesque sed sit amet eros.  
				In porttitor tempus nulla, a porta purus commodo sed. Praesent hendrerit nisi nunc, ut porttitor justo pellentesque et ac gravida sem mattis. Donec ornare justo nec</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet sem sit amet dolor luctus pellentesque Nam egestas molestie elit. Vivamus sed accumsan quam, a mollis magna. Nam aliquet eros eget sapien consequat</p>
			</div>
			<div class="col-md-4 about-right">
				<ul>
					<h5>Awards</h5>
					<li><span class="glyphicon glyphicon-menu-right"></span> Lorem ipsum dolor sit amet cingelit</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> Curabitur id metus rutrum convallis</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> Morbi dictum velit vitae porttitor</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> Fusce at metus id justo ullamcorper</li>
					<li><span class="glyphicon glyphicon-menu-right"></span> Aliquam ac nisl id justo malesuada </li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>-->
	<!--//about-->
	<!--work-experience-->
	<div id="work" class="work">
		<div class="container">
			<h3 class="title">工作经历</h3>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2017.11 - 至今 </h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-briefcase"> </span>南京某某软件有限公司</h5>
					<p>公司主要是致力于江苏省工地安全监督管理系统的开发，本人在公司负责整个页面的前端开发，配合后台人员实现产品前端界面效果与功能。主要是参与移动端H5混合开发
						例如建安通、移动执法等，也参与了江苏安监通小程序的开发。 </p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!--<div class="work-info"> 
				<div class="col-md-6 work-right work-right2"> 
					<h4>2010 - 2012 </h4>
				</div>
				<div class="col-md-6 work-left work-left2"> 
					<h5> Company Name <span class="glyphicon glyphicon-briefcase"></span> </h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>-->
		</div>
	</div>
	<!--//work-experience-->
	<!--education-->
	<div id="education" class="education">
		<div class="container">
			<h3 class="title">教育经历</h3>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2011-2015</h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-education"> </span> 湖北大学知行学院</h5>
					<p>2011年至2015年，完成本科学业学习。 </p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!--<div class="work-info"> 
				<div class="col-md-6 work-right work-right2"> 
					<h4>Diploma in Design - 2010</h4>
				</div>
				<div class="col-md-6 work-left work-left2"> 
					<h5>  <span class="glyphicon glyphicon-education"></span></h5>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </p>
				</div>
				<div class="clearfix"> </div>
			</div>-->
			
		</div>
	</div>
	<!--//education-->
	<!--skills-->
	<div id="skills" class="skills">
		<div class="container">
			<h3 class="title">技能</h3>
			<div class="skills-info">
				<div class="col-md-6 bar-grids">
					<h6>HTML/CSS <span> 90% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 90%">
						</div>
					</div>
					<h6>JS/jQ <span> 90% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 90%">
						</div>
					</div>
					<h6>H5/MUI<span>80% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 80%">
						</div>
					</div>
					<h6>VUE <span> 75% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 75%">
						</div>
					</div>
				</div>
				<div class="col-md-6 bar-grids">
					<h6>Bootstrap/jQMobile <span> 85% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 85%">
						</div>
					</div>
					<h6>微信小程序<span> 70% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 70%">
						</div>
					</div>
					<h6>PS基本操作<span>60% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 60%">
						</div>
					</div>
					<h6>PHP简单了解<span> 50% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 50%">
						</div>
					</div>			
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--portfolio-->
	<div id="projects" class="portfolio">
		<div class="container">
			<h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">我的项目</h3>
			<div class="sap_tabs">			
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s">
						<li class="resp-tab-item"><span>全部</span></li>
						<li class="resp-tab-item"><span>Html</span></li>
						<li class="resp-tab-item"><span> VUE</span></li>				
					</ul>	
					<div class="clearfix"> </div>	
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://wujingj.gitee.io/xiaomi">
											<img src="images/project1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>仿小米官网</h3>
												<p>本项目主要是采用了html,css,jq等实现的一个仿小米官网的静态页面，实现了轮播图、倒计时等功能</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid effect-sarah">
										<!--class="swipebox"-->
										<a href="https://wujingj.gitee.io/elema" >
											<img src="images/project2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>VUE2.0饿了吗</span></h3>
												<p>本项目主要采用了vue2.0+webpack饿了吗app</p>
											</div>
										</a>	
									</div>
								</div>		
								<div class="clearfix"> </div>
							</div>
						</div>
						
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://wujingj.gitee.io/xiaomi/">
											<img src="images/project1.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>仿小米官网</h3>
												<p>本项目主要是采用了html,css,jq等实现的一个仿小米官网的静态页面，实现了轮播图、倒计时等功能</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="https://wujingj.gitee.io/elema">
											<img src="images/project2.png" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>VUE2.0饿了吗</h3>
												<p>本项目主要采用了vue2.0+webpack饿了吗app</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--ResponsiveTabs-->
			<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$('#horizontalTab').easyResponsiveTabs({
						type: 'default', //Types: default, vertical, accordion           
						width: 'auto', //auto or any width like 600px
						fit: true   // 100% fit in a container
					});
				});		
			</script>
			<!--//ResponsiveTabs-->
			<!-- swipe box js -->
			<script src="js/jquery.swipebox.min.js"></script> 
				<script type="text/javascript">
					jQuery(function($) {
						$(".swipebox").swipebox();
					});
			</script>
			<!-- //swipe box js -->
		</div>
	</div>
	<!--//portfolio-->
	<!--smooth-scrolling-of-move-up-->
	<script type="text/javascript">
		$(document).ready(function() {
		
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	<!--//smooth-scrolling-of-move-up-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>